| @@ -14,8 +14,15 @@ | ||
| 14 | 14 | .yatra-method-switcher { |
| 15 | 15 | margin-bottom: 18px; |
| 16 | 16 | } |
| 17 | 17 | |
| 18 | +/* Card-only checkout: no method chooser is rendered, so the card field stands | |
| 19 | + alone directly under the Stripe option. Give it a little breathing room the | |
| 20 | + switcher used to provide. */ | |
| 21 | +.yatra-stripe-container--single-method .yatra-stripe-card-wrapper { | |
| 22 | + margin-top: 6px; | |
| 23 | +} | |
| 24 | + | |
| 18 | 25 | .yatra-method-switcher__header { |
| 19 | 26 | margin-bottom: 16px; |
| 20 | 27 | } |
| 21 | 28 | |
| @@ -22,9 +29,9 @@ | ||
| 22 | 29 | .yatra-label-eyebrow { |
| 23 | 30 | font-size: 0.75rem; |
| 24 | 31 | text-transform: uppercase; |
| 25 | 32 | letter-spacing: 0.1em; |
| 26 | - color: #2563eb; | |
| 33 | + color: var(--yatra-primary-dark, #2563eb); | |
| 27 | 34 | margin: 0 0 6px; |
| 28 | 35 | } |
| 29 | 36 | |
| 30 | 37 | .yatra-method-switcher__title { |
| @@ -138,9 +145,9 @@ | ||
| 138 | 145 | background: #f1f5f9; |
| 139 | 146 | display: inline-flex; |
| 140 | 147 | align-items: center; |
| 141 | 148 | justify-content: center; |
| 142 | - color: #2563eb; | |
| 149 | + color: var(--yatra-primary-dark, #2563eb); | |
| 143 | 150 | transition: background 0.15s ease; |
| 144 | 151 | flex-shrink: 0; |
| 145 | 152 | pointer-events: auto; |
| 146 | 153 | } |
| @@ -189,9 +196,9 @@ | ||
| 189 | 196 | transform: translate(-50%, -14px); |
| 190 | 197 | } |
| 191 | 198 | |
| 192 | 199 | .yatra-method-button.is-active { |
| 193 | - border-color: #2563eb; | |
| 200 | + border-color: var(--yatra-primary-dark, #2563eb); | |
| 194 | 201 | box-shadow: 0 10px 26px rgba(37, 99, 235, 0.2); |
| 195 | 202 | transform: translateY(-3px); |
| 196 | 203 | } |
| 197 | 204 | |
| @@ -236,9 +243,9 @@ | ||
| 236 | 243 | .yatra-wallet-eyebrow { |
| 237 | 244 | font-size: 0.75rem; |
| 238 | 245 | text-transform: uppercase; |
| 239 | 246 | letter-spacing: 0.1em; |
| 240 | - color: #2563eb; | |
| 247 | + color: var(--yatra-primary-dark, #2563eb); | |
| 241 | 248 | margin: 0; |
| 242 | 249 | } |
| 243 | 250 | |
| 244 | 251 | .yatra-wallet-title { |
| @@ -320,9 +327,9 @@ | ||
| 320 | 327 | transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; |
| 321 | 328 | } |
| 322 | 329 | |
| 323 | 330 | .yatra-stripe-card-element--focus { |
| 324 | - border-color: #2563eb; | |
| 331 | + border-color: var(--yatra-primary-dark, #2563eb); | |
| 325 | 332 | box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.6); |
| 326 | 333 | } |
| 327 | 334 | |
| 328 | 335 | .yatra-stripe-card-element--invalid { |
| @@ -351,12 +358,8 @@ | ||
| 351 | 358 | border-top-color: #fff; |
| 352 | 359 | animation: yatra-spin 1s ease-in-out infinite; |
| 353 | 360 | margin-right: 8px; |
| 354 | 361 | vertical-align: middle; |
| 355 | -} | |
| 356 | - | |
| 357 | -@keyframes yatra-spin { | |
| 358 | - to { transform: rotate(360deg); } | |
| 359 | 362 | } |
| 360 | 363 | |
| 361 | 364 | /* Responsive adjustments */ |
| 362 | 365 | @media (max-width: 480px) { |
