/**
 * Nöbetçi Noterler - Front-end stilleri
 *
 * @package NobetciNoterler
 * @since   1.0.0
 */

.nn-widget {
	--nn-primary:  #18523f;
	--nn-accent:   #b8851c;
	--nn-radius:   7px;
	--nn-max-w:    420px;
	--nn-font:     inherit;
	--nn-text:     #1a2a1e;
	--nn-fs:       14px;

	--nn-bg:       #ffffff;
	--nn-bg2:      #f5f6f4;
	--nn-bg3:      #eaf3ee;
	--nn-bord:     #e2e6e2;
	--nn-bord2:    #cdd3cc;
	--nn-t1:       var(--nn-text);
	--nn-t2:       #4d6355;
	--nn-t3:       #96a89e;
	--nn-acc-bg:   #fdf7e8;
	--nn-acc-br:   rgba(184, 133, 28, 0.25);

	font-family:   var(--nn-font);
	font-size:     var(--nn-fs);
	color:         var(--nn-text);
	max-width:     var(--nn-max-w);
	width:         100%;
	border-radius: var(--nn-radius);
	overflow:      hidden;
	border:        1px solid var(--nn-bord);
	background:    var(--nn-bg2);
	position:      relative;
	-webkit-font-smoothing: antialiased;
}

.nn-widget.nn-dark {
	--nn-bg:     #1a1f1b;
	--nn-bg2:    #141814;
	--nn-bg3:    #1e2e22;
	--nn-bord:   #2a352c;
	--nn-bord2:  #3a4a3c;
	--nn-t1:     var(--nn-text);
	--nn-t2:     #9ab09e;
	--nn-t3:     #5a7060;
	--nn-acc-bg: #1e1a0f;
	--nn-acc-br: rgba(184, 133, 28, 0.3);
}

.nn-widget,
.nn-widget *,
.nn-widget *::before,
.nn-widget *::after {
	box-sizing: border-box;
}

.nn-widget h1,
.nn-widget h2,
.nn-widget h3,
.nn-widget h4,
.nn-widget h5,
.nn-widget h6,
.nn-widget p,
.nn-widget span,
.nn-widget label,
.nn-widget small,
.nn-widget strong,
.nn-widget em,
.nn-widget div,
.nn-widget button,
.nn-widget select,
.nn-widget option,
.nn-widget input {
	font-family: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.nn-widget a,
.nn-widget a:visited,
.nn-widget a:hover,
.nn-widget a:focus,
.nn-widget a:active {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

.nn-widget button,
.nn-widget select,
.nn-widget input {
	font: inherit;
	color: inherit;
}

.nn-widget svg {
	fill: none;
	stroke: currentColor;
}

.screen-reader-text {
	clip:     rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height:   1px;
	width:    1px;
	overflow: hidden;
}

.nn-top-bar {
	height:     3px;
	background: var(--nn-primary);
}

.nn-header {
	background: var(--nn-primary);
	padding:    16px 18px 13px;
}

.nn-header__row {
	display:       flex;
	align-items:   center;
	gap:           10px;
	margin-bottom: 5px;
}

.nn-widget .nn-header__row {
	align-items: center !important;
}

.nn-header__icon {
	width:           32px;
	height:          32px;
	flex-shrink:     0;
	background:      rgba(255, 255, 255, 0.1);
	border:          1px solid rgba(255, 255, 255, 0.18);
	border-radius:   6px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           rgba(255, 255, 255, 0.9);
}

.nn-widget .nn-header__icon {
	align-self: center !important;
	margin: 0 !important;
}

.nn-header__title {
	font-size:      calc(var(--nn-fs) * 1.43);
	font-weight:    700;
	color:          #fff;
	margin:         0;
	flex:           1;
	letter-spacing: -0.2px;
	line-height:    1.3;
}

.nn-official-tag {
	font-size:      9px;
	font-weight:    700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color:          var(--nn-accent);
	background:     rgba(184, 133, 28, 0.12);
	border:         1px solid rgba(184, 133, 28, 0.3);
	padding:        3px 8px;
	border-radius:  3px;
	white-space:    nowrap;
	flex-shrink:    0;
}

.nn-header__sub {
	font-size:   calc(var(--nn-fs) * 0.79);
	color:       rgba(255, 255, 255, 0.48);
	font-weight: 400;
	margin:      0;
}

.nn-widget .nn-header__title {
	color: #fff !important;
	align-self: center !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

.nn-widget .nn-header__title::before,
.nn-widget .nn-header__title::after,
.nn-widget .nn-header__row::before,
.nn-widget .nn-header__row::after,
.nn-widget .nn-header__icon::before,
.nn-widget .nn-header__icon::after {
	content: none !important;
	display: none !important;
}

.nn-widget .nn-header__sub {
	color: rgba(255, 255, 255, 0.48) !important;
}

.nn-city-band {
	background:    #1e6b50;
	padding:       9px 18px;
	display:       flex;
	align-items:   center;
	gap:           10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.13);
}

.nn-city-label {
	font-size:      10px;
	font-weight:    700;
	color:          rgba(255, 255, 255, 0.45);
	letter-spacing: 0.9px;
	text-transform: uppercase;
	white-space:    nowrap;
	flex-shrink:    0;
}

.nn-city-wrap {
	flex:     1;
	position: relative;
}

.nn-city-wrap::after {
	content:        '';
	position:       absolute;
	right:          10px;
	top:            50%;
	transform:      translateY(-50%);
	border-left:    4px solid transparent;
	border-right:   4px solid transparent;
	border-top:     5px solid rgba(255, 255, 255, 0.4);
	pointer-events: none;
}

.nn-city-select {
	width:         100%;
	appearance:    none;
	background:    rgba(255, 255, 255, 0.08);
	border:        1px solid rgba(255, 255, 255, 0.14);
	border-radius: 5px;
	padding:       7px 28px 7px 10px;
	font-family:   var(--nn-font);
	font-size:     calc(var(--nn-fs) * 0.93);
	font-weight:   500;
	color:         #fff;
	cursor:        pointer;
	outline:       none;
}

.nn-widget .nn-city-select {
	color: #fff !important;
}

.nn-city-select:focus {
	border-color: rgba(255, 255, 255, 0.4);
}

.nn-city-select option {
	color:      #1a2a1e;
	background: #ffffff;
}

.nn-date-tabs {
	background:    var(--nn-bg);
	display:       grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 2px solid var(--nn-bord);
}

.nn-date-tab {
	background:    none;
	border:        none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	padding:       11px 14px;
	font-family:   var(--nn-font);
	cursor:        pointer;
	display:       flex;
	align-items:   center;
	justify-content: space-between;
	gap:           8px;
	transition:    background 0.15s, border-color 0.15s;
	width:         100%;
	text-align:    left;
}

.nn-date-tab:first-child {
	border-right: 1px solid var(--nn-bord);
}

.nn-date-tab:hover:not(.active) {
	background: var(--nn-bg2);
}

.nn-date-tab.active {
	border-bottom-color: var(--nn-primary);
	background:          var(--nn-bg);
}

.nn-date-tab__info {
	display:        flex;
	flex-direction: column;
	gap:            2px;
}

.nn-date-tab__day {
	font-size:      calc(var(--nn-fs) * 0.71);
	font-weight:    600;
	color:          var(--nn-t3);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.nn-date-tab.active .nn-date-tab__day {
	color: var(--nn-primary);
}

.nn-date-tab__date {
	font-size:   calc(var(--nn-fs) * 0.93);
	font-weight: 600;
	color:       var(--nn-t1);
}

.nn-date-tab__badge {
	background:    var(--nn-bg2);
	color:         var(--nn-t2);
	border:        1px solid var(--nn-bord2);
	font-size:     calc(var(--nn-fs) * 0.79);
	font-weight:   700;
	padding:       3px 9px;
	border-radius: 99px;
	flex-shrink:   0;
}

.nn-date-tab.active .nn-date-tab__badge {
	background:   var(--nn-bg3);
	color:        var(--nn-primary);
	border-color: rgba(24, 82, 63, 0.18);
}

.nn-summary {
	background:    var(--nn-acc-bg);
	border:        1px solid var(--nn-acc-br);
	border-left:   3px solid var(--nn-accent);
	border-radius: var(--nn-radius);
	margin:        12px 13px 8px;
	padding:       12px 14px;
	display:       flex;
	align-items:   center;
	justify-content: space-between;
	gap:           8px;
	box-shadow:    0 6px 16px rgba(17, 24, 39, 0.04);
}

.nn-summary__left {
	display:     flex;
	align-items: baseline;
	gap:         6px;
}

.nn-summary__num {
	font-size:   calc(var(--nn-fs) * 1.43);
	font-weight: 700;
	color:       var(--nn-t1);
	line-height: 1;
	letter-spacing: -0.4px;
}

.nn-summary__label {
	font-size: calc(var(--nn-fs) * 0.86);
	color:     var(--nn-t2);
	font-weight: 500;
}

.nn-summary__hours {
	display:     flex;
	align-items: center;
	gap:         5px;
	font-size:   calc(var(--nn-fs) * 0.79);
	font-weight: 600;
	color:       var(--nn-accent);
	white-space: nowrap;
}

.nn-widget .nn-summary__hours,
.nn-widget .nn-summary__hours svg,
.nn-widget .nn-summary__hours-text {
	color: var(--nn-accent) !important;
}

.nn-list {
	padding:         10px 12px 14px;
	display:         flex;
	flex-direction:  column;
	gap:             20px;
	max-height:      600px;
	overflow-y:      auto;
	scrollbar-width: thin;
	scrollbar-color: var(--nn-bord2) transparent;
}

.nn-list::-webkit-scrollbar { width: 4px; }
.nn-list::-webkit-scrollbar-track { background: transparent; }
.nn-list::-webkit-scrollbar-thumb { background: var(--nn-bord2); border-radius: 4px; }
.nn-list::-webkit-scrollbar-thumb:hover { background: var(--nn-t3); }

.nn-day-group[hidden] { display: none; }

.nn-day-group {
	display:        flex;
	flex-direction: column;
	gap:            5px;
}

.nn-card {
	background:    var(--nn-bg);
	border:        1px solid var(--nn-bord);
	border-left:   3px solid var(--nn-bord2);
	border-radius: var(--nn-radius);
	padding:       12px 12px 10px;
	transition:    border-left-color 0.18s;
}

.nn-card:hover {
	border-left-color: var(--nn-primary);
}

.nn-card__name {
	font-size:     calc(var(--nn-fs) * 0.93);
	font-weight:   700;
	color:         var(--nn-t1);
	line-height:   1.35;
	margin-bottom: 5px;
}

.nn-widget .nn-card__name {
	color: var(--nn-t1) !important;
}

.nn-card__address {
	display:       flex;
	align-items:   flex-start;
	gap:           5px;
	font-size:     calc(var(--nn-fs) * 0.86);
	color:         var(--nn-t2);
	line-height:   1.5;
	margin-bottom: 10px;
	padding-top:   1px;
}

.nn-card__address svg {
	flex-shrink: 0;
	margin-top:  2px;
	color:       var(--nn-t3);
}

.nn-card__actions {
	display:       flex;
	gap:           7px;
	flex-wrap:     wrap;
	margin-bottom: 9px;
}

.nn-btn {
	flex:            1;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             5px;
	padding:         6px 11px;
	border-radius:   5px;
	font-family:     var(--nn-font);
	font-size:       calc(var(--nn-fs) * 0.86);
	font-weight:     600;
	text-decoration: none;
	border:          1px solid transparent;
	cursor:          pointer;
	transition:      background 0.14s, color 0.14s, border-color 0.14s;
	white-space:     nowrap;
}

.nn-widget .nn-btn {
	text-decoration: none !important;
}

.nn-btn--call {
	background:   var(--nn-bg3);
	color:        var(--nn-primary);
	border-color: rgba(24, 82, 63, 0.18);
}

.nn-widget a.nn-btn--call,
.nn-widget a.nn-btn--call:visited {
	color: var(--nn-primary) !important;
}

.nn-btn--call:hover,
.nn-btn--call:focus {
	background: var(--nn-primary);
	color:      #fff;
}

.nn-widget a.nn-btn--call:hover,
.nn-widget a.nn-btn--call:focus,
.nn-widget a.nn-btn--call:hover svg,
.nn-widget a.nn-btn--call:focus svg {
	color: #fff !important;
}

.nn-btn--map {
	background:   #edf1f8;
	color:        #1c3d6e;
	border-color: rgba(28, 61, 110, 0.14);
}

.nn-widget a.nn-btn--map,
.nn-widget a.nn-btn--map:visited {
	color: #1c3d6e !important;
}

.nn-btn--map:hover,
.nn-btn--map:focus {
	background: #1c3d6e;
	color:      #fff;
}

.nn-widget a.nn-btn--map:hover,
.nn-widget a.nn-btn--map:focus,
.nn-widget a.nn-btn--map:hover svg,
.nn-widget a.nn-btn--map:focus svg {
	color: #fff !important;
}

.nn-dark .nn-btn--map {
	background:   #1a2030;
	color:        #7a9fd4;
	border-color: rgba(122, 159, 212, 0.2);
}

.nn-dark .nn-btn--map:hover {
	background: #2a4070;
	color:      #fff;
}

.nn-card__meta {
	display:     flex;
	align-items: center;
	gap:         8px;
	flex-wrap:   wrap;
	border-top:  1px solid var(--nn-bord);
	padding-top: 8px;
}

.nn-meta-item {
	display:     inline-flex;
	align-items: center;
	gap:         4px;
	font-size:   calc(var(--nn-fs) * 0.79);
	color:       var(--nn-t3);
}

.nn-widget .nn-meta-item,
.nn-widget .nn-meta-item svg {
	color: var(--nn-t3) !important;
}

.nn-meta-dot {
	font-size: calc(var(--nn-fs) * 0.79);
	color:     var(--nn-bord2);
}

.nn-empty,
.nn-error-state {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	padding:        32px 20px;
	gap:            10px;
	text-align:     center;
	color:          var(--nn-t3);
}

.nn-empty p,
.nn-error-state p {
	font-size: calc(var(--nn-fs) * 0.93);
	color:     var(--nn-t2);
}

.nn-footer {
	background:      var(--nn-primary);
	border-top:      2px solid rgba(0, 0, 0, 0.1);
	padding:         9px 18px;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             12px;
}

.nn-footer__links a {
	font-size:       calc(var(--nn-fs) * 0.79);
	color:           rgba(255, 255, 255, 0.4);
	text-decoration: none;
	transition:      color 0.2s;
}

.nn-footer__links a:hover,
.nn-footer__links a:focus {
	color: rgba(255, 255, 255, 0.8);
}

.nn-footer__brand {
	font-size:   calc(var(--nn-fs) * 0.79);
	color:       rgba(255, 255, 255, 0.55);
	font-weight: 500;
}

.nn-widget .nn-footer__brand,
.nn-widget .nn-footer__copy,
.nn-widget .nn-footer__ref,
.nn-widget .nn-footer__ref:visited {
	color: rgba(255, 255, 255, 0.55) !important;
	text-decoration: none !important;
}

.nn-widget .nn-footer__ref {
	display: none !important;
}

.nn-footer__copy {
	font-size: calc(var(--nn-fs) * 0.79);
	color:     rgba(255, 255, 255, 0.22);
}

.nn-loading-overlay {
	position:        absolute;
	inset:           0;
	background:      rgba(255, 255, 255, 0.8);
	display:         flex;
	align-items:     center;
	justify-content: center;
	z-index:         10;
}

.nn-loading-overlay[hidden] {
	display: none !important;
}

.nn-dark .nn-loading-overlay {
	background: rgba(20, 24, 20, 0.85);
}

.nn-spinner {
	width:         28px;
	height:        28px;
	border:        3px solid rgba(0, 0, 0, 0.08);
	border-top:    3px solid var(--nn-primary);
	border-radius: 50%;
	animation:     nn-spin 0.75s linear infinite;
}

.nn-dark .nn-spinner {
	border-color:     rgba(255, 255, 255, 0.1);
	border-top-color: var(--nn-primary);
}

@keyframes nn-spin {
	to { transform: rotate(360deg); }
}

@media (max-width: 400px) {
	.nn-card__actions {
		flex-direction: column;
	}
}

.nn-fallback-notice {
	margin:        0 13px 14px;
	padding:       12px 14px;
	background:    linear-gradient(180deg, #fffaf0 0%, #fff4d8 100%);
	border:        1px solid rgba(245, 166, 35, 0.28);
	border-left:   4px solid #f5a623;
	border-radius: calc(var(--nn-radius) - 1px);
	font-size:     calc(var(--nn-fs) * 0.86);
	font-weight:   500;
	color:         #7a5c00;
	line-height:   1.5;
	box-shadow:    0 6px 14px rgba(245, 166, 35, 0.08);
}

.nn-dark .nn-fallback-notice {
	background: linear-gradient(180deg, #3a2e00 0%, #2a2100 100%);
	color:      #f5d78e;
	border-color: rgba(245, 166, 35, 0.24);
}