/**
 * TT Tool Rental — Frontend Styles
 * Button colors/fonts pulled from plugin Style settings (wp_options).
 * Fallback defaults: #DA0801 background, Poppins font.
 */

:root {
	--ttr-primary:       #007A7C;
	--ttr-primary-dark:  #006668;
	--ttr-primary-light: #e6f4f4;
	--ttr-accent:        #E11A21;
	--ttr-text:          #1d2327;
	--ttr-text-light:    #646970;
	--ttr-bg:            #ffffff;
	--ttr-border:        #e0e0e0;
	--ttr-shadow:        0 4px 24px rgba(0,0,0,0.15);
	--ttr-radius:        8px;
	--ttr-transition:    0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ── Rent Button ─────────────────────────────── */
.ttr-rent-button {
	display:         inline-flex !important;
	align-items:     center;
	gap:             6px;
	font-family:     "Poppins", Sans-serif !important;
	font-size:       14px !important;
	font-weight:     600 !important;
	letter-spacing:  0.6px !important;
	color:           #FFFFFF !important;
	fill:            #FFFFFF !important;
	background-color:#DA0801 !important;
	border-style:    solid !important;
	border-width:    1px !important;
	border-color:    #DA0801 !important;
	border-radius:   8px !important;
	padding:         12px 40px !important;
	cursor:          pointer !important;
	text-decoration: none !important;
	line-height:     1.4 !important;
	transition:      all var(--ttr-transition) !important;
}

.ttr-rent-button:hover {
	background-color:#00747A !important;
	border-color:    #00747A !important;
	color:           #FFFFFF !important;
	transform:       translateY(-1px);
	box-shadow:      0 4px 12px rgba(0,116,122,0.3);
}

.ttr-rent-button:active {
	transform: translateY(0);
}

.ttr-rent-button .dashicons {
	font-size:   16px;
	width:       16px;
	height:      16px;
	line-height: 16px;
}

/* Loop shortcode button */
.ttr-rent-button-loop {
	width:           100%;
	justify-content: center;
	margin-top:      8px !important;
}

/* Daily rate badge on shop loop */
.ttr-daily-rate-badge {
	display:     block;
	text-align:  center;
	margin-top:  6px;
	color:       var(--ttr-primary);
	font-weight: 600;
	font-size:   13px;
}
.ttr-daily-rate-badge small {
	font-weight: 400;
	color:       var(--ttr-text-light);
	font-size:   11px;
}

/* ── Single product rent section ─────────────── */
.ttr-single-rental-section {
	margin-top:    20px !important;
	margin-bottom: 30px !important;
	padding:       16px 20px !important;
	background:    var(--ttr-primary-light) !important;
	border-radius: var(--ttr-radius) !important;
	border:        1px solid rgba(0,122,124,0.15) !important;
	clear:         both;
	width:         100%;
	display:       block !important;
	float:         none !important;
	box-sizing:    border-box;
}

.ttr-rental-info {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   12px;
	flex-wrap:       wrap;
	gap:             8px;
}

.ttr-rental-price-tag {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   15px;
}
.ttr-rental-price-tag .dashicons { color: var(--ttr-primary); }
.ttr-rental-label  { font-weight: 600; color: var(--ttr-text); }
.ttr-rental-rate   { font-size: 20px; font-weight: 800; color: var(--ttr-primary); }
.ttr-rental-rate small { font-size: 13px; font-weight: 400; color: var(--ttr-text-light); }

.ttr-rent-button-single {
	width:           100%;
	justify-content: center;
}

/* ── Popup overlay ───────────────────────────── */
.ttr-overlay {
	position:        fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background:      rgba(0,0,0,0.6);
	z-index:         999999;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         20px;
	opacity:         0;
	transition:      opacity var(--ttr-transition);
}
.ttr-overlay.ttr-visible { opacity: 1; }

.ttr-popup {
	background:    var(--ttr-bg);
	border-radius: 12px;
	width: 100%;
	max-width:     500px;
	max-height:    90vh;
	overflow-y:    auto;
	box-shadow:    var(--ttr-shadow);
	position:      relative;
	transform:     translateY(20px) scale(0.95);
	transition:    transform var(--ttr-transition);
}
.ttr-overlay.ttr-visible .ttr-popup { transform: translateY(0) scale(1); }

.ttr-popup::-webkit-scrollbar       { width: 6px; }
.ttr-popup::-webkit-scrollbar-track { background: transparent; }
.ttr-popup::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* ── Popup close ─────────────────────────────── */
.ttr-popup-close {
	position:    absolute;
	top: 12px; right: 12px;
	background:  none;
	border:      none;
	font-size:   28px;
	color:       #999;
	cursor:      pointer;
	width: 36px; height: 36px;
	display:     flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition:  all var(--ttr-transition);
	z-index:     10;
	line-height: 1;
	padding:     0;
}
.ttr-popup-close:hover { background: #f0f0f0; color: var(--ttr-accent); }

/* ── Popup header ────────────────────────────── */
.ttr-popup-header { padding: 24px 24px 16px; border-bottom: 1px solid var(--ttr-border); }

.ttr-popup-product-info { display: flex; align-items: center; gap: 16px; }

.ttr-popup-thumb {
	width: 64px; height: 64px;
	border-radius: var(--ttr-radius);
	object-fit: cover;
	border: 1px solid var(--ttr-border);
}

.ttr-popup-product-name {
	margin: 0 0 4px;
	font-size:   18px;
	font-weight: 700;
	color:       var(--ttr-text);
	line-height: 1.3;
	padding-right: 30px;
}

.ttr-popup-daily-rate       { font-size: 16px; font-weight: 700; color: var(--ttr-primary); }
.ttr-popup-daily-rate small { font-weight: 400; color: var(--ttr-text-light); font-size: 12px; }

/* ── Popup form ──────────────────────────────── */
.ttr-popup-body  { padding: 20px 24px 24px; }
.ttr-form-row    { margin-bottom: 16px; }
.ttr-form-dates  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.ttr-form-group label {
	display:     flex;
	align-items: center;
	gap:         6px;
	font-size:   13px;
	font-weight: 600;
	color:       var(--ttr-text);
	margin-bottom: 6px;
}
.ttr-form-group label .dashicons { font-size: 16px; width: 16px; height: 16px; color: var(--ttr-primary); }

.ttr-form-group input[type="date"] {
	width:      100%;
	padding:    10px 12px;
	border:     2px solid var(--ttr-border);
	border-radius: 6px;
	font-size:  14px;
	color:      var(--ttr-text);
	background: #fff;
	transition: border-color var(--ttr-transition);
	-webkit-appearance: none;
	appearance: none;
}
.ttr-form-group input[type="date"]:focus {
	border-color: var(--ttr-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0,122,124,0.1);
}

/* ── Quantity ────────────────────────────────── */
.ttr-qty-wrapper {
	display:       flex;
	align-items:   center;
	border:        2px solid var(--ttr-border);
	border-radius: 6px;
	overflow:      hidden;
	width:         fit-content;
}
.ttr-qty-btn {
	width: 40px; height: 40px;
	border:      none;
	background:  #f7f7f7;
	font-size:   18px;
	font-weight: 700;
	color:       var(--ttr-text);
	cursor:      pointer;
	transition:  background var(--ttr-transition);
	display:     flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.ttr-qty-btn:hover { background: var(--ttr-primary-light); color: var(--ttr-primary); }

.ttr-qty-wrapper input[type="number"] {
	width: 50px; height: 40px;
	border: none;
	border-left:  1px solid var(--ttr-border);
	border-right: 1px solid var(--ttr-border);
	text-align:   center;
	font-size:    15px;
	font-weight:  600;
	-moz-appearance: textfield;
	padding: 0; margin: 0;
}
.ttr-qty-wrapper input[type="number"]::-webkit-outer-spin-button,
.ttr-qty-wrapper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Price breakdown ─────────────────────────── */
.ttr-price-breakdown {
	background:    #fafcfc;
	border:        2px solid var(--ttr-primary-light);
	border-radius: var(--ttr-radius);
	padding:       16px;
	margin-bottom: 16px;
}
.ttr-price-row {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	padding:         6px 0;
	font-size:       14px;
	color:           var(--ttr-text-light);
}
.ttr-price-row span:last-child { font-weight: 600; color: var(--ttr-text); }
.ttr-price-total { border-top: 2px solid var(--ttr-primary); margin-top: 8px; padding-top: 12px !important; }
.ttr-price-total span:first-child { font-size: 16px; font-weight: 700; color: var(--ttr-text); }
.ttr-price-total span:last-child  { font-size: 20px; font-weight: 800; color: var(--ttr-primary); }

/* ── Terms ───────────────────────────────────── */
.ttr-terms { margin-bottom: 16px; }
.ttr-terms details { border: 1px solid var(--ttr-border); border-radius: 6px; overflow: hidden; }
.ttr-terms summary {
	padding:     10px 14px;
	font-size:   13px;
	font-weight: 600;
	color:       var(--ttr-text-light);
	cursor:      pointer;
	background:  #f9f9f9;
	transition:  background var(--ttr-transition);
}
.ttr-terms summary:hover { background: #f0f0f0; }
.ttr-terms-content { padding: 14px; font-size: 13px; line-height: 1.6; color: var(--ttr-text-light); max-height: 150px; overflow-y: auto; }

/* ── Messages ────────────────────────────────── */
.ttr-popup-message {
	padding:       10px 14px;
	border-radius: 6px;
	font-size:     13px;
	font-weight:   500;
	margin-bottom: 12px;
	display:       flex;
	align-items:   center;
	gap:           8px;
}
.ttr-popup-message.ttr-msg-error   { background: #fde9ea; color: #721c24; border: 1px solid #f5c6cb; }
.ttr-popup-message.ttr-msg-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }

/* ── Submit button ───────────────────────────── */
.ttr-popup-footer { padding-top: 4px; }

.ttr-submit-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	width:           100%;
	padding:         14px 24px;
	background:      #DA0801;
	color:           #fff;
	border:          1px solid #DA0801;
	border-radius:   8px;
	font-family:     "Poppins", Sans-serif;
	font-size:       14px;
	font-weight:     600;
	letter-spacing:  0.6px;
	text-transform:  uppercase;
	cursor:          pointer;
	transition:      all var(--ttr-transition);
}
.ttr-submit-btn:hover    { background: #00747A; border-color: #00747A; box-shadow: 0 4px 16px rgba(0,116,122,0.3); transform: translateY(-1px); }
.ttr-submit-btn:active   { transform: translateY(0); }
.ttr-submit-btn:disabled { background: #ccc; cursor: not-allowed; transform: none; box-shadow: none; }
.ttr-submit-btn .dashicons { font-size: 18px; width: 18px; height: 18px; }

.ttr-submit-btn.ttr-loading { position: relative; color: transparent; }
.ttr-submit-btn.ttr-loading::after {
	content: "";
	position: absolute;
	width: 20px; height: 20px;
	border: 3px solid rgba(255,255,255,0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ttr-spin 0.6s linear infinite;
}
@keyframes ttr-spin { to { transform: rotate(360deg); } }

.ttr-view-cart-link {
	display:         inline-block;
	margin-top:      8px;
	padding:         12px 40px;
	background:      #DA0801;
	color:           #fff !important;
	border:          1px solid #DA0801;
	border-radius:   8px;
	text-decoration: none !important;
	font-family:     "Poppins", Sans-serif;
	font-size:       14px;
	font-weight:     600;
	letter-spacing:  0.6px;
	transition:      all var(--ttr-transition);
	text-align:      center;
	width:           100%;
	box-sizing:      border-box;
}
.ttr-view-cart-link:hover { background: #00747A; border-color: #00747A; color: #fff !important; }

/* ── Elementor layout fixes ──────────────────── */
.elementor-widget-woocommerce-product-add-to-cart form.cart {
	display:        flex !important;
	flex-direction: column !important;
	align-items:    stretch !important;
}
.ttr-single-rental-section {
	order:      99 !important;
	width:      100% !important;
	float:      none !important;
	display:    block !important;
	margin-top: 20px !important;
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 480px) {
	.ttr-overlay  { align-items: flex-end; padding: 0; }
	.ttr-popup    { max-height: 95vh; border-radius: 12px 12px 0 0; margin-top: auto; }
	.ttr-popup-header { padding: 20px 16px 12px; }
	.ttr-popup-body   { padding: 16px; }
	.ttr-form-dates   { grid-template-columns: 1fr; }
	.ttr-popup-product-info { gap: 12px; }
	.ttr-popup-thumb { width: 48px; height: 48px; }
	.ttr-popup-product-name { font-size: 15px; }
}