/**
 * GravitationDesign Tools – Styles
 * Frontend + Modal + Ergebnis-Darstellung
 */

/* ============================================================
   CSS Custom Properties
   ============================================================ */
:root {
	--gd-primary:        #0d3b5e;
	--gd-primary-light:  #1a5480;
	--gd-bg:             #f0f2f4;
	--gd-white:          #ffffff;
	--gd-text:           #333333;
	--gd-text-muted:     #666666;
	--gd-border:         #c8cfd8;
	--gd-pass:           #16a34a;
	--gd-fail:           #dc2626;
	--gd-warn:           #d97706;
	--gd-radius:         6px;
	--gd-shadow:         0 8px 32px rgba(0,0,0,.18);
	--gd-transition:     .2s ease;
}

/* ============================================================
   Block-Wrapper
   ============================================================ */
.gd-tools-checker {
	/* background: var(--gd-white); */
	border-radius: 0;
	padding:       48px 32px;
	text-align:    center;
	font-family:   inherit;
	box-sizing:    border-box;
}

/* ============================================================
   Ãœberschrift
   ============================================================ */
.gd-tools-checker .gd-heading {
	color:          var(--gd-primary);
	font-size:      clamp(1.8rem, 4vw, 2.6rem);
	font-weight:    300;
	text-transform: uppercase;
	letter-spacing: .06em;
	line-height:    1.2;
	margin:         0 0 20px;
}

.gd-tools-checker .gd-heading strong {
	font-weight: 800;
}

/* ============================================================
   Beschreibungstext
   ============================================================ */
.gd-tools-checker .gd-description {
	color:      var(--gd-text-muted);
	font-size:  1rem;
	line-height: 1.7;
	max-width:  640px;
	margin:     0 auto 32px;
}

/* ============================================================
   URL-Form
   ============================================================ */
.gd-tools-form {
	display:         flex;
	flex-wrap:       wrap;
	gap: 0px;
	justify-content: center;
	max-width:       580px;
	margin:          0 auto 32px;
}

.gd-url-input {
	flex:          1 1 280px;
	padding:       13px 18px;
	border: 2px solid var(--gd-white);
	border-radius: 0;
	font-size:     15px;
	color:         var(--gd-text);
	background:    var(--gd-white);
	transition:    border-color var(--gd-transition), box-shadow var(--gd-transition);
	outline:       none;
}

.gd-url-input:focus {
	border-color: var(--gd-primary);
	box-shadow:   0 0 0 3px rgba(13,59,94,.15);
}

.gd-url-input.gd-input-error {
	border-color: var(--gd-fail);
	box-shadow:   0 0 0 3px rgba(220,38,38,.15);
}

.gd-submit-btn {
	padding:       13px 24px;
	background: #00485a;
	color:         var(--gd-white);
	border: 4px solid #fff;
	border-radius: 0;
	font-size:     15px;
	font-weight:   700;
	letter-spacing: .04em;
	cursor:        pointer;
	transition:    background var(--gd-transition), transform var(--gd-transition);
	white-space:   nowrap;
	text-transform: uppercase;
}

.gd-submit-btn:hover {
	background: var(--gd-white);
	color: #00485a;
	border: 4px solid #00485a;
}

.gd-submit-btn:active {
	transform: scale(.97);
}

.gd-submit-btn:disabled {
	opacity: .6;
	cursor:  not-allowed;
}

.gd-tools-block {
    background-color: #353740;
    text-align: center;
    color: #fff;
    padding: 50px;
}

.gd-tools-block .gd-heading {
    color: #fff;
    margin: 0 0 25px 0;
}

/* ============================================================
   Hinweistext (Emojis + Kurzinfos)
   ============================================================ */
.gd-tools-hint {
	/* color: var(--gd-text-white); */
	font-size:   .9rem;
	margin:      0 0 32px;
	line-height: 1.6;
}

/* ============================================================
   Kontaktbereich
   ============================================================ */
.gd-contact-area {
	/* border-top:  2px solid var(--gd-border); */
	/* padding-top: 28px; */
	/* margin-top:  8px; */
}

.gd-contact-buttons {
	display:         flex;
	flex-wrap:       wrap;
	flex-direction:  column;
	align-items:     center;
	gap:             14px;
}

.gd-btn-outline {
	display:        inline-block;
	padding:        14px 40px;
	border: 2.5px solid var(--gd-white);
	/* border-radius:  var(--gd-radius); */
	color: 2.5px solid var(--gd-white)!important;
	font-size:      15px;
	font-weight:    700;
	letter-spacing: .06em;
	text-decoration: none;
	text-transform:  uppercase;
	transition:      background var(--gd-transition), color var(--gd-transition);
	min-width:       280px;
	text-align:      center;
}

.gd-btn-outline:hover {
	background: var(--gd-primary);
	color:      var(--gd-white);
}

/* ============================================================
   Modal – Overlay
   ============================================================ */
.gd-modal-overlay {
	position:   fixed;
	inset:      0;
	background: rgba(0,0,0,.55);
	z-index:    999999;
	display:    flex;
	align-items: center;
	justify-content: center;
	padding:    16px;
	animation:  gdFadeIn .2s ease;
}

.gd-modal-overlay.gd-modal-closing {
	animation: gdFadeOut .25s ease forwards;
}

@keyframes gdFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes gdFadeOut {
	from { opacity: 1; }
	to   { opacity: 0; }
}

/* ============================================================
   Modal – Box
   ============================================================ */
.gd-modal-box {
	background:    var(--gd-white);
	border-radius: 12px;
	box-shadow:    var(--gd-shadow);
	width:         100%;
	max-width:     720px;
	max-height:    90vh;
	display:       flex;
	flex-direction: column;
	animation:     gdSlideUp .25s ease;
	overflow:      hidden;
}

@keyframes gdSlideUp {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Modal – Header
   ============================================================ */
.gd-modal-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         18px 24px;
	border-bottom:   2px solid var(--gd-bg);
	background:      var(--gd-primary);
	flex-shrink:     0;
}

.gd-modal-title {
	margin:      0;
	font-size:   1.1rem;
	font-weight: 700;
	color:       var(--gd-white);
	letter-spacing: .04em;
}

.gd-modal-close {
	background: transparent;
	border:     none;
	cursor:     pointer;
	color:      rgba(255,255,255,.8);
	padding:    4px;
	display:    flex;
	transition: color var(--gd-transition);
}

.gd-modal-close:hover {
	color: var(--gd-white);
}

/* ============================================================
   Modal – Body
   ============================================================ */
.gd-modal-body {
	padding:    24px;
	overflow-y: auto;
	flex:       1;
}

/* ============================================================
   Lade-Spinner
   ============================================================ */
.gd-loading {
	text-align: center;
	padding:    32px 0;
	color:      var(--gd-text-muted);
}

.gd-spinner {
	color:     var(--gd-primary);
	animation: gdSpin 1s linear infinite;
	margin:    0 auto 16px;
	display:   block;
}

@keyframes gdSpin {
	to { transform: rotate(360deg); }
}

/* ============================================================
   Ergebnis – Header mit Score-Kreis
   ============================================================ */
.gd-result-header {
	display:     flex;
	align-items: center;
	gap:         24px;
	margin:      0 0 24px;
	padding:     20px;
	background:  var(--gd-bg);
	border-radius: var(--gd-radius);
}

.gd-result-url {
	font-size:   .85rem;
	color:       var(--gd-text-muted);
	word-break:  break-all;
	margin:      4px 0 0;
}

/* ============================================================
   Score-Kreis
   ============================================================ */
.gd-score-circle {
	position:   relative;
	width:       88px;
	height:      88px;
	flex-shrink: 0;
	background:  conic-gradient(
		var(--gd-score-color) 0deg var(--gd-score-deg),
		#e5e7eb var(--gd-score-deg) 360deg
	);
	border-radius: 50%;
	display:     flex;
	align-items: center;
	justify-content: center;
}

.gd-score-circle::before {
	content:       '';
	position:      absolute;
	width:         66px;
	height:        66px;
	background:    var(--gd-white);
	border-radius: 50%;
}

.gd-score-circle--sm {
	width:  72px;
	height: 72px;
}

.gd-score-circle--sm::before {
	width:  54px;
	height: 54px;
}

.gd-score-value,
.gd-score-max {
	position:    relative;
	z-index:     1;
	font-weight: 800;
	color:       var(--gd-score-color, var(--gd-primary));
}

.gd-score-value {
	font-size: 1.6rem;
}

.gd-score-max {
	font-size: .75rem;
	margin-left: 1px;
	align-self: flex-end;
	padding-bottom: 6px;
}

.gd-grade {
	font-weight: 700;
	font-size:   1rem;
	margin:      0 0 4px;
}

/* ============================================================
   Kriterien-Liste
   ============================================================ */
.gd-section-title {
	font-size:   .85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin:      20px 0 10px;
}

.gd-section-title.gd-fail { color: var(--gd-fail); }
.gd-section-title.gd-pass { color: var(--gd-pass); }

.gd-criteria-list {
	list-style: none;
	margin:     0 0 8px;
	padding:    0;
}

.gd-criterion {
	display:       flex;
	align-items:   flex-start;
	gap:           10px;
	padding:       10px 12px;
	border-radius: var(--gd-radius);
	margin-bottom: 6px;
	font-size:     .9rem;
}

.gd-criterion > div {
	flex: 1;
}

.gd-criterion--pass {
	background: #f0fdf4;
	border:     1px solid #bbf7d0;
}

.gd-criterion--fail {
	background: #fef2f2;
	border:     1px solid #fecaca;
}

.gd-criterion--warn {
	background: #fffbeb;
	border:     1px solid #fde68a;
}

.gd-criterion-icon {
	font-weight:  700;
	font-size:    1rem;
	flex-shrink:  0;
	margin-top:   1px;
}

.gd-criterion--pass .gd-criterion-icon { color: var(--gd-pass); }
.gd-criterion--fail .gd-criterion-icon { color: var(--gd-fail); }
.gd-criterion--warn .gd-criterion-icon { color: var(--gd-warn); }

.gd-criterion-pts {
	font-size:   .8rem;
	font-weight: 700;
	white-space: nowrap;
	margin-top:  2px;
}

.gd-criterion--pass .gd-criterion-pts { color: var(--gd-pass); }
.gd-criterion--fail .gd-criterion-pts { color: var(--gd-fail); }

.gd-criterion-detail {
	font-size:   .82rem;
	color:       var(--gd-text-muted);
	margin:      4px 0 0;
}

/* ============================================================
   PageSpeed – Grid
   ============================================================ */
.gd-ps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin-bottom: 20px;
}

.gd-ps-device {
	background:    var(--gd-bg);
	border-radius: var(--gd-radius);
	padding:       16px;
}

.gd-ps-device-header {
	display:     flex;
	align-items: center;
	gap:         16px;
	margin:      0 0 16px;
}

.gd-metrics-table {
	width:        100%;
	border-collapse: collapse;
	font-size:    .85rem;
}

.gd-metrics-table th,
.gd-metrics-table td {
	padding:      6px 10px;
	text-align:   left;
	border-bottom: 1px solid var(--gd-border);
}

.gd-metrics-table th {
	font-weight: 700;
	color:       var(--gd-primary);
	background:  rgba(13,59,94,.06);
}

/* ============================================================
   Ergebnis-CTA
   ============================================================ */
.gd-result-cta {
	border-top:  2px solid var(--gd-bg);
	padding-top: 20px;
	margin-top:  20px;
	text-align:  center;
}

.gd-result-cta p {
	color:     var(--gd-text-muted);
	font-size: .9rem;
	margin:    0 0 14px;
}

.gd-result-cta-btns {
	display:         flex;
	gap:             12px;
	justify-content: center;
	flex-wrap:       wrap;
}

.gd-result-cta .gd-btn-outline {
	min-width: auto;
	padding:   10px 24px;
	font-size: .9rem;
}

/* ============================================================
   Disclaimer-Toggle (vor und nach dem Check)
   ============================================================ */
.gd-disclaimer-toggle {
	margin-top:  16px;
	text-align:  center;
}

.gd-disclaimer-btn {
	display:        inline-flex;
	align-items:    center;
	gap:            6px;
	background: var(--gd-white);
	border:         1.5px solid var(--gd-border);
	border-radius:  20px;
	padding:        6px 16px;
	font-size:      .82rem;
	color:          var(--gd-text-muted);
	cursor:         pointer;
	transition:     border-color var(--gd-transition), color var(--gd-transition);
	font-family:    inherit;
}

.gd-disclaimer-btn:hover {
	border-color: var(--gd-primary);
	color:        var(--gd-primary);
}

.gd-disclaimer-btn[aria-expanded="true"] {
	border-color: var(--gd-primary);
	color:        var(--gd-primary);
	background: var(--gd-white);
}

.gd-disclaimer-icon {
	font-style:  normal;
	font-weight: 700;
	font-size:   .9rem;
	line-height: 1;
}

.gd-disclaimer-arrow {
	font-size:  .75rem;
	transition: transform var(--gd-transition);
}

.gd-disclaimer-body {
	margin-top:    12px;
	text-align:    left;
	animation:     gdFadeIn .2s ease;
	background-color: var(--gd-white);
}

.gd-disclaimer-content {
	/* background:    rgba(13,59,94,.04); */
	/* border:        1.5px solid var(--gd-border); */
	/* border-radius: var(--gd-radius); */
	padding:       14px 18px;
	font-size:     .85rem;
}

.gd-disclaimer-row {
	display:       grid;
	grid-template-columns: 130px 1fr;
	gap:           8px;
	padding:       6px 0;
	border-bottom: 1px solid var(--gd-border);
}

.gd-disclaimer-row:last-of-type {
	border-bottom: none;
}

.gd-disclaimer-key {
	font-weight: 700;
	color:       var(--gd-primary);
	font-size:   .8rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding-top: 1px;
}

.gd-disclaimer-val {
	color:       var(--gd-text);
	line-height: 1.5;
}

.gd-disclaimer-warn {
	color: var(--gd-warn);
}

.gd-disclaimer-note {
	margin:      12px 0 0;
	font-style:  italic;
	color:       var(--gd-text-muted);
	font-size:   .82rem;
	line-height: 1.5;
	border-top:  1px dashed var(--gd-border);
	padding-top: 10px;
}

/* Im Modal */
.gd-modal-disclaimer {
	border-top:  2px solid var(--gd-bg);
	padding-top: 16px;
	margin-top:  16px;
	margin-bottom: 16px;
}

.gd-disclaimer-btn--modal {
	display: flex;
}

@media (max-width: 600px) {
	.gd-disclaimer-row {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}
.gd-error {
	text-align: center;
	padding:    32px 0;
	color:      var(--gd-fail);
}

.gd-error p {
	margin: 12px 0 16px;
	font-size: .95rem;
	color: var(--gd-text);
}

.gd-error-action {
	margin-top: 8px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 600px) {
	.gd-tools-checker {
		padding: 32px 20px;
	}

	.gd-tools-form {
		flex-direction: column;
	}

	.gd-url-input,
	.gd-submit-btn {
		width: 100%;
	}

	.gd-result-header {
		flex-direction: column;
		text-align: center;
	}

	.gd-modal-box {
		max-height: 95vh;
	}
}